<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="box-card">
    <h1 class="container">消息中心</h1>
    <el-timeline>
      <el-timeline-item
        :timestamp="item.updataTime"
        placement="top"
        v-for="item in tableData"
        :key="item.id"
      >
        <el-card class="message_card">
          <div class="tou_box">
            <div class="tou_img">
              <el-avatar
                :size="50"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>
              <span class="tou_name">
                {{ item.name }}
              </span>
            </div>
            <el-rate
              v-model="item.rateNumber"
              disabled
              show-score
              text-color="#ff9900"
              class="tou_rate"
            >
            </el-rate>
          </div>
          <p>{{ item.message }}</p>
          <div style="display: flex">
            <div
              v-for="(i, index) in item.imgaes"
              :key="index"
              style="margin-right: 10px"
            >
              <div></div>
              <el-image
                style="width: 50px; height: 50px"
                :src="'data:image/png;base64,' + i.url"
                :preview-src-list="item.images"
              >
              </el-image>
            </div>
          </div>
          <div>
            <el-tag type="success" style="margin-right: 10px"
              >赞{{ item.upNum }}
            </el-tag>
            <el-tag type="danger">踩 {{ item.downNum }}</el-tag>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>
      
<script>
export default {
  created() {
    this.getUserList();
  },
  data() {
    return {
      tableData: [
        {
          id: "1",
          newTime: "2024.2.20",
          name: "肖二拾",
          message: "真的很棒的",
          rate: 3.6,
          images: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
          ],
        },
      ],
    };
  },
  methods: {
    // 刷新
    async getUserList() {
      const poiId = window.localStorage.getItem("poiId");
      const { data: userList } = await this.$http.get(
        "/admin/messageCenter/getList",
        {
          params: {
            poiId,
          },
        }
      );
      const { data: imageList } = await this.$http.post("/admin/images", {
        poiId: poiId,
        isWhat: "1",
        isMessage: "1",
      });
      const newList = userList.data.filter((item) => {
        const isFixList = imageList.data.filter((j) => j.stuId === item.stuId);
        const isFixImags = isFixList.filter((i) => i.url);
        if (isFixList) {
          item.imgaes = isFixImags;
          return true;
        }
        return true;
      });

      if (!newList.length) {
        this.$message.error("刷新失败");
        return;
      }
      this.tableData = newList;
    },
  },
};
</script>
      
<style scoped>
.tou_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tou_img {
  display: flex;
  align-items: center;
}
.tou_name {
  margin-left: 10px;
}
.message_card {
  position: relative;
}
.message_btn {
  position: absolute;
  top: 60px;
  right: 40px;
}
</style>
      